<template>
  <div class="local">
    <!-- 列表内容 -->
    <div
      class="list_the_content"
      v-for="item in state.gameslist"
      :key="item.id"
    >
      <!--   图 -->
      <div class="ltc_img">
        <van-image width="86" height="86" :src="item.url" />
      </div>

      <!--   右边内容 -->
      <div class="ltc_right">
        <!-- 1 -->
        <div class="ltcr1">
          <h3>{{ item.title }}</h3>
          <van-image
            width="4"
            height="11"
            :src="require('../../../../../public/img/我的游戏/组 7.png')"
            @click="removegame(item.id)"
          />
        </div>
        <!-- 2 -->
        <div class="ltcr2">
          <van-image
            width="13"
            height="13"
            :src="require('../../../../../public/img/我的游戏/mygame5.png')"
          />
          游戏时长<span>11</span>小时
        </div>
        <!-- 3 -->
        <div class="ltcr3">
          <van-image
            v-if="item.update"
            width="43"
            height="19"
            :src="require('../../../../../public/img/我的游戏/mygame10.png')"
          />
          <div v-else>&nbsp;</div>
          <div class="ltcr3_right">
            <van-image
              width="14"
              height="12"
              :src="require('../../../../../public/img/我的游戏/mygame8.png')"
            />
            &nbsp; 论坛
            <van-button type="primary" round size="mini" class="anniu"
              >启动</van-button
            >
          </div>
        </div>
        <!-- 4 -->
        <div class="ltcr4">
          <div class="ltcr4_1">
            战姬强度榜
            <van-image
              width="12"
              height="12"
              :src="require('../../../../../public/img/我的游戏/火.png')"
            />
            <van-icon name="arrow" />
          </div>
          <div class="ltcr4_2">
            礼包兑换领取
            <van-icon name="arrow" />
          </div>
          <div class="ltcr4_3">
            <van-image
              width="28"
              height="28"
              :src="require('../../../../../public/img/我的游戏/组 6.png')"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- {{ nihao }} -->
  </div>
</template>

<script>
import { Toast } from "vant";
import { reactive, onMounted, computed } from "vue";
import { useStore } from "vuex";
import axios from "axios";
export default {
  setup() {
    const store = useStore();
    // 列表内容
    const state = reactive({
      gameslist: [],
      idlist: [],
    });
    if (localStorage.getItem("games")) {
      state.idlist = localStorage.getItem("games").split(",");
    }

    state.idlist.forEach((value) => {
      axios
        .post("http://121.199.14.205:3000/api/detail", {
          id: value,
        })
        .then(function (response) {
          state.gameslist = state.gameslist.concat(response.data.result);
        });
    });

    const removegame = (id) => {
      setTimeout(() => {
        store.commit("changehours", true);
      }, 1500);
      Toast.loading({
        message: "卸载中...",
        forbidClick: true,
      });
      setTimeout(() => {
        state.gameslist = [];
        state.idlist.forEach((value, index) => {
          if (id == value) {
            state.idlist.splice(index, 1);
            localStorage.setItem("games", state.idlist);
            state.idlist.forEach((value) => {
              axios
                .post("http://121.199.14.205:3000/api/detail", {
                  id: value,
                })
                .then(function (response) {
                  state.gameslist = state.gameslist.concat(
                    response.data.result
                  );
                });
            });
          }
        });
        Toast("卸载完成");
      }, 1500);
    };
    // 接口

    onMounted(() => {
      // getGameLibraryNativeData();
    });

    // const getGameLibraryNativeData = async () => {
    //   const res = await getGameLibraryNative();
    //   console.log(res);
    // };

    // const nihao = computed(() => store.state.count);

    const nihao = computed(() => {
      return console.log(store.dispatch.getGameLibraryNativeData);
    });

    return {
      // contentlist,
      // getGameLibraryNativeData,
      nihao,
      state,
      removegame,
    };
  },
};
</script>

<style lang="less" scoped>
.local {
  margin-bottom: 63px;
  // 列表内容
  .list_the_content {
    display: flex;
    padding: 12px;
    // background: pink;
    font-size: 14px;
    // .ltc_img {
    //   margin: auto;
    // }
    .ltc_right {
      flex: 1;
      padding: 0 10px;
      border-bottom: 1px solid #ccc;
      .ltcr1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 6px 0;
      }
      .ltcr2 {
        color: #bababa;
        margin: 6px 0;
      }
      .ltcr3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 6px 0;
        .ltcr3_right {
          display: flex;
          align-items: center;
          color: #6fd2d2;
          .anniu {
            padding: 0 25px;
            margin-left: 6px;
          }
        }
      }
      .ltcr4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        margin: 6px 0;
        .ltcr4_1,
        .ltcr4_2 {
          display: flex;
          justify-content: center;
          align-items: center;
          background: #f5f4f4;
          padding: 6px;
          border-radius: 15px;
        }
      }
    }
  }
}
</style>
